<template> 
	<el-card>
        <template #header>
            <el-space :wrap="false"> 
                <el-avatar style="background-color:green;"><icon icon="fa-solid:project-diagram"/></el-avatar>
                <el-row>
                    <el-col :span="24">
                        <el-text type="info" size="small">编号：{{ editForm.id }}</el-text>
												<el-text type="info" size="small">&nbsp;&nbsp;代号：{{ editForm.code }}</el-text> 
												<el-tooltip content="项目代号用于签订合同等甲乙方共享的场景;项目编号为内部编号，用于内部流转,编号生成规则:项目代号+四位随机码">
													<icon icon="ep:info-filled" />
												</el-tooltip>
												<el-text type="info">&nbsp;&nbsp;流程状态：<mdp-select itemCode="bizFlowState" v-model="editForm.bizFlowState" showStyle="tag" disabled/></el-text>
                    </el-col>

                    <el-col :span="24">
                        <el-text size="large"> {{ editForm.name }}</el-text> 
                    </el-col>
                </el-row>
            </el-space>
        </template>
        <el-descriptions :column="3" size="small" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user />
                        </el-icon>
                        项目经理
                    </div>
                </template>
                {{ editForm.pmUsername || editForm.pmUserid }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <iphone />
                        </el-icon>
                        项目状态
                    </div>
                </template>
                <mdp-select width="100%" size="small" itemCode="projectStatus" v-model="editForm.status" showStyle="tag"
                    :disabled="true" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <location />
                        </el-icon>
                        项目类型
                    </div>
                </template>
                <mdp-select width="100%" showStyle="tag" itemCode="projectType" v-model="editForm.xmType"
                    @change="editSomeFields(editForm, 'projectType', $event)" :disabled="true" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <tickets />
                        </el-icon>
                        当前阶段
                    </div>
                </template>
 								<mdp-select width="100%"  :clearable="false" v-if="editForm.xmType" show-style="tag" size="small" label="当前阶段"
									:itemCode="'projectPhasePlans' + editForm.xmType" v-model="editForm.currPhase"
									@change="editSomeFields(editForm, 'currPhase', $event)" :disabled="true"/>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <Timer />
                        </el-icon>
                        时间周期
                    </div>
                </template>
                <el-space wrap>
									{{ $mdp.formatDate(editForm.startTime,'Y-M-D') }}~{{ $mdp.formatDate(editForm.endTime,'Y-M-D') }}
									 
								</el-space>

            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <office-building />
                        </el-icon>
                        所属部门
                    </div>
                </template>
                <mdp-select-dept showStyle="tag" width="100%" v-model="editForm.deptid" placeholder="归属部门" :displayLoad="true"
						@change2="editSomeFields(editForm, 'deptid', $event)" :disabled="true"/>
            </el-descriptions-item>
        </el-descriptions>
    </el-card> 
  <el-table :data="tableDatas" v-adaptive>
		<el-table-column type="index"/>
		<el-table-column prop="name" label="名称"  width="200px"/>  
		<el-table-column prop="ovalue" label="原值" min-width="120px">
			<template #default="{row}"> 
				<mdp-input width="100%" v-if="row.item_type=='1'" v-model="row.ovalue"  disabled/>
				<mdp-input width="100%" v-else-if="row.item_type=='2'" type="number"  v-model="row.ovalue"  disabled/>
				<mdp-date width="100%" v-else-if="row.item_type=='3'" v-model="row.ovalue"  disabled/>
				<mdp-select width="100%" v-else-if="row.item_type=='4'" :itemCode="row.itemCode" v-model="row.ovalue"  disabled/>
				<mdp-input width="100%" v-else-if="row.item_type=='8'" type="textarea" rows="4"  v-model="row.ovalue"  disabled/>
				<mdp-select-user width="100%" v-else-if="row.item_type=='16'" v-model="row.ovalue"  disabled/>
				<mdp-select-dept width="100%" v-else-if="row.item_type=='17'" v-model="row.ovalue"  disabled/>
				<mdp-input width="100%" v-else v-model="row.ovalue"  disabled/>
			</template>
		</el-table-column>   
		<el-table-column prop="nvalue" label="新值" min-width="120px">
			<template #default="{row}">
				 
				<mdp-input width="100%" v-if="row.item_type=='1'" v-model="row.nvalue" :disabled="nvalueDisabled" :class="{'red-border':true}"/>
				<mdp-input width="100%" v-else-if="row.item_type=='2'" type="number"  v-model="row.nvalue" :disabled="nvalueDisabled" :class="{'red-border':true}"/>
				<mdp-date width="100%" v-else-if="row.item_type=='3'" v-model="row.nvalue" :disabled="nvalueDisabled" :class="{'red-border':true}"/>
				<mdp-select width="100%" v-else-if="row.item_type=='4'" :itemCode="row.itemCode" v-model="row.nvalue" :disabled="nvalueDisabled" :class="{'red-border':true}"/>
				<mdp-input width="100%" v-else-if="row.item_type=='8'" type="textarea" rows="4"  v-model="row.nvalue" :disabled="nvalueDisabled" :class="{'red-border':true}"/>
				<mdp-select-user width="100%" v-else-if="row.item_type=='16'" v-model="row.nvalue" :disabled="nvalueDisabled" :class="{'red-border':true}"/>
				<mdp-select-dept width="100%" v-else-if="row.item_type=='17'" v-model="row.nvalue" :disabled="nvalueDisabled" :class="{'red-border':true}"/>
				<mdp-input width="100%" v-else v-model="row.nvalue" :class="{'red-border':true}"/>
			</template>
		</el-table-column>  
		<el-table-column prop="remark" label="填写说明" min-width="120px">
			<template #default="{row}">
				{{ row.fremark }}
			</template>
		</el-table-column>  
	</el-table>
	<div class="footer padding-right">
		<el-text type="danger">需要在【项目视图->配置->设置】中设置变更需要审核字段</el-text>
		<el-button @click="sendToProcessApprova()" icon="finished" type="warning">变更提审</el-button></div>
	
</template>

<script>
import util from '@/components/mdp-ui/js/util';//全局公共库
import { sn } from '@/components/mdp-ui/js/sequence';//全局公共库

import config from "@/api/mdp_pub/mdp_config"; //全局公共库
 
import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user';
import { useXmStore2, useXmStore} from '@/store/modules/xm' 
 
export default { 
	computed: {
		...mapState(useUserStore, [
			'userInfo', 'roles'
		]),

		...mapState(useXmStore, [
			'projectInfo'
		]), 
		nvalueDisabled(){
			return this.extVars?.id
		}
	},
	watch: { 
	},
	data() { 
		return { 
			load: { list: false, add: false, del: false, edit: false },//查询中...
			 
			xmProjectFields:[],
			tableDatas:[],
			editForm:{},
			extVars:{},
		}//end return
	},//end data
	methods: {   
		initTalbeDatas(){
			let qxFields=this.projectInfo.flowFields
			if(!qxFields){
				this.tableDatas=[]
				return;
			}
			let qxFieldList=qxFields.split(",")
			let tds=[]
			this.xmProjectFields.forEach((k)=>{
				let extVals=JSON.parse(k.extVals?.length>0?k.extVals:'[]') 
				let row={id:k.id,name:k.name,ovalue:this.editForm[k.id],nvalue:this.editForm[k.id]}
				if(this.extVars.id){
					row.nvalue=this.extVars[k.id]
				}
				extVals.forEach(k=>{
					row[k.id]=k.value
				})
				if(qxFieldList.some(f=>f==k.id)){
					tds.push(row)
				}
				
			})
			this.tableDatas=tds
		},
		sendToProcessApprova: function () {
			let row=this.editForm
			let bizKey="xm_project_comm_change_approva"
			// 传过来的参数格式
			if (row.bizFlowState == '1') {
				this.$notify.error("审核中，不允许重复发审");
				return;
			}
			// if(row.status<='1'){
			// 	this.$notify.error("未立项前的项目不需要变更");
			// 	return;
			// }
			// if(row.status>='8'){
			// 	this.$notify.error("已关闭项目不允许变更");
			// 	return;
			// }  

			var currDomain = window.location.protocol + "//" + window.location.host;
			var fullPath = this.$route.fullPath; 
			var bizUrl = this.$mdp.getUri(currDomain ,config.getXmCtx(), '/#', fullPath) 

			let params = {
				bizKey: bizKey,
				bizUrl: bizUrl,
				resUrl: '',
				bizId: row.id,
				bizPid: row.id,
				mainContext: '', 
				flowVars: {
					subscribeTaskEvent: 'TASK_COMPLETED,TASK_CREATED',
					data: {
						id: row.id,
						branchId: row.branchId
					}
				},
			} 

				//立项审核
				params.mainTitle = '关于项目【' + row.name + "】变更的审批申请";
				let newRow={id:row.id}
				let tds=this.tableDatas.filter(k=>{
					if(row[k.id]==k.nvalue){
						return false;
					}else{
						return true;
					}
				})
				if(tds.length==0){
					this.$notify({ position: 'bottom-left', showClose: true, message: "没有更改数据，无须提交", type: 'error' })
					return;
				}
				tds.forEach(n=>{
					newRow[n.id]=n.nvalue
					params.mainContext=params.mainContext+`<li>${n.name}: ${n.ovalue} - > ${n.nvalue}</li>`
				})
				newRow.branchId=row.branchId
				params.mainContext=`<p><ol>${params.mainContext}</ol></p>` 
				params.restUrl = "/"+config.getXmCtx() + "/xm/core/xmProject/processApprova";
				params.flowVars.data = newRow
				params.bizUrl=params.bizUrl+'&extVars='+JSON.stringify(newRow)
				//this.html2canvas(document.querySelector(".editForm"),row,params);
				this.$router.push({ name: 'bizStartProc', query: { paramsId: this.$mdp.setCacheParams(params) } });
		},
		 
 
		initCurrData(){ 
			this.editForm={...this.projectInfo}
			if(this.$route.query.extVars){
				this.extVars=JSON.parse(this.$route.query.extVars) 
			}else{
				this.extVars={}
			}
			
			this.$mdp.getDictOptions('xm_project_fields').then(res=>
			{
				this.xmProjectFields=res
				this.initTalbeDatas()
			
		})
		}
		/**end 在上面加自定义方法**/
	},//end method
	mounted(){
		this.initCurrData();
	}
}

</script> 